<template>
  <view-page>
    <div class="bg"></div>
    <div class="container">
      <div class="header-title">
        <div class="left">
          <span class="material-symbols-outlined">chevron_left</span>
          <span class="text">个人信息</span>
        </div>
      </div>
      <ReportMenus :menus="menus" :showBg="true" />
      <div class="form">
        <van-form @submit="onSubmit">
          <div class="form-group-name">
            头像照片
          </div>
          <van-cell-group inset>
            <van-field name="uploader" class="form-upload">
              <template #input>
                <van-uploader v-model="avatar" />
              </template>
            </van-field>
          </van-cell-group>
          <div class="form-desc">建议图片上传尺寸：256x256像素，支持PNG，JPG，GIF格式</div>
          <div class="form-group-name">
            个人信息
          </div>
          <van-cell-group inset>
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              class="form-input"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="company"
              name="单位"
              label="单位"
              placeholder="单位"
              class="form-input"
              :rules="[{ required: true, message: '请填写单位' }]"
            />
            <van-field
              v-model="address"
              name="地址"
              label="地址"
              placeholder="地址"
              class="form-input"
              :rules="[{ required: true, message: '请填写地址' }]"
            />
            <van-field
              v-model="mail"
              name="邮件"
              label="邮件"
              placeholder="邮件"
              class="form-input"
              :rules="[{ required: true, message: '请填写邮件' }]"
            />
            <van-field
              v-model="zipCode"
              name="邮编"
              label="邮编"
              placeholder="邮编"
              class="form-input"
              :rules="[{ required: true, message: '请填写邮编' }]"
            />
            <van-field
              v-model="tel"
              name="电话"
              label="电话"
              placeholder="电话"
              class="form-input"
              :rules="[{ required: true, message: '请填写电话' }]"
            />
            <van-field
              v-model="fax"
              name="传真"
              label="传真"
              placeholder="传真"
              class="form-input"
              :rules="[{ required: true, message: '请填写传真' }]"
            />
            <van-field
              v-model="phone"
              name="手机"
              label="手机"
              placeholder="手机"
              class="form-input"
              :rules="[{ required: true, message: '请填写手机' }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-config-provider :theme-vars="themeVars">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </van-config-provider>
          </div>
          <div style="margin: 16px;">
            <van-config-provider :theme-vars="themeVars">
              <van-button round block  native-type="submit">
                返回
              </van-button>
            </van-config-provider>
          </div>
        </van-form>
      </div>
    </div>
    <CardView/>
    <FooterView />
  </view-page>
</template>

<script setup>
import {ref, reactive} from 'vue'
import CardView from '@/components/Footer/CardView'
import FooterView from '@/components/Footer/FooterView.vue';
import ReportMenus from '@/pages/Report/ReportMenus.vue';

const themeVars = reactive({
  buttonDefaultHeight: '3rem',
  buttonRoundRadius: 0,
  buttonPrimaryBackground: 'red',
  buttonPrimaryBorderColor: 'red',
});

const menus = ref([
  {
    id: 1,
    title: '我的送检',
    icon: 'assignment',
    path: '/mobile/my-submission',
  },
  {
    id: 2,
    
    title: '我的预约',
    icon: 'event_available',
    path: '/mobile/my-order',
  },
  {
    id: 3,
    title: '报告验伪',
    icon: 'barcode_scanner',
    path: '/mobile/my-report-result',
  },
  { 
    id: 4, 
    title: '送样单位', 
    icon: 'home_work',
    path: '/mobile/my-report-list',
  },
  { 
    id: 5, 
    title: '地址信息', 
    icon: 'pin_drop',
    path: '/mobile/my-report-company',
  },
  { 
    id: 6, 
    title: '个人信息', 
    icon: 'badge',
    active: true,
    path: '/mobile/my-report', 
  },
])

const username = ref('王晓蕾')
const company = ref('勘探开发研究院')
const address = ref('北京市海淀区学院路20号实验一区115号房间')
const mail = ref('wangxiaolei@cnpc.com.cn')
const zipCode = ref('1000083')
const tel = ref('010-83270282')
const fax = ref('1000083')
const phone = ref('010-83270282')
const avatar = ref([
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
]);

</script>

<style scoped lang="scss">

.container{
  position: relative;
  // margin-top: dpi(13rem);
  z-index: 1;
  .header-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: dpi(5rem);
    .left{
      display: flex;
      align-items: center;
      color: #fff;
      font-family: swiper-icons;
      text-transform: none !important;
      letter-spacing: 0;
      font-variant: initial;
      line-height: 1;
      .text{
        margin-left: dpi(4rem);
        font-family: PingFangSC-Semibold;
        font-size: dpi(4rem);
        color: #ffffff;
      }
    }
  }
}

.operate{
  margin: 0 dpi(5rem);
  margin-top: dpi(6rem);
  .top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: dpi(5rem);
  }
  .title{
    font-family: PingFangSC-Semibold;
    font-size: dpi(3rem);
    color: #05204d;
  }
  .filter{
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    color: #0571b0;
    > .icon{
      margin: 0 dpi(.6rem);
      display: block;
      width: dpi(2rem);
      height: dpi(2rem);
      font-size: dpi(2rem);
      color: #888888;
    }
  }

  .tabs{
    display: flex;
    .tab-item{
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: dpi(6rem);
      font-family: PingFangSC-Semibold;
      font-size: dpi(2rem);
      cursor: pointer;
      &:not(&.active) {
        color: #888888;
        background-color: #f5f5f5;
      }
      &.active{
        color: #ffffff;
        background-color: #0571b0;
      }
    }
  }
}

.form{
  margin-top: dpi(4rem);
  .form-desc{
    padding: dpi(4rem) 0;
    margin: 0 dpi(4rem);
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    color: #888888;
    border-bottom: 1px solid #dddddd;
  }
  &-group-name{
    margin: dpi(4rem);
    font-family: PingFangSC-Medium;
    font-size: dpi(3rem);
    color: #05204d;
  }
  ::v-deep{
    .van-cell-group{
      margin: 0 dpi(4rem);
    }
  }
  .form-upload{
    padding: 0;
    ::v-deep{
      .van-cell__value{
        padding: 0 !important;
        margin: 0;
        border: none !important;
      }
    }
    
  }
}

.form-input{
  position: relative;
  padding: 0;
  border-bottom: 1px solid #dddddd;
  ::v-deep{
    .van-cell__value{
      border: none !important;
    }
    .van-field__label{
      display: flex;
      align-items: center;
      font-family: PingFangSC-Semibold;
      > label{
        font-size: dpi(2rem);
        color: #0571b0;
      }
    }
    .van-field__control{
      height: 100%;
      text-align: right;
      font-family: PingFangSC-Regular;
      font-size: dpi(3rem);
      color: #05204d;
    }
  }
}
</style>